<template>
  <div id="com-menu-machine">
    <el-menu id="menu-machine" :collapse="true">
      <el-menu-item v-for="(server, index) in servers" :key="index"
        :class="index == serverCurIndex ? 'server-active' : ''"
        @click="actionMenuItemClicked(index)"
      >
        <img :src="icons['ubuntu']" class="server-icon">
        <span slot="title">{{server.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
    data() {
        return {
            icons : {
                'ubuntu' : require('../assets/ubuntu.png'),
                'centos' : require('../assets/centos.png'),
            },
        };
    },
    computed : {
        /** 服务器列表 */
        servers () {
            return this.$store.getters.servers;
        },
        serverCurIndex() {
            return this.$store.getters.serverCurIndex;
        },
    },
    methods : {
        /** */
        async actionMenuItemClicked( id ) {
            if ( id == this.$store.getters.serverCurIndex ) {
                return;
            }
            await this.$store.dispatch('serverSwitch',id);
            this.$router.replace('/dashboard');
        }
    },
}
</script>
<style scoped>
#com-menu-machine {height: 100%;}
#menu-machine {padding-bottom: 100px;box-sizing: border-box;overflow-y: scroll;background: #efefef;}
#menu-machine::-webkit-scrollbar { display: none; }
.server-icon {width: 24px;height: 24px;border-radius: 50%;}
.server-active {background: #cfcfcf;}
</style>